<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>博客</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
  <!--引入样式文件-->
  <link rel="stylesheet" href="../static/lib/editormd/examples/css/style.css" th:src="@{/lib/editormd/examples/css/style.css}" />
  <link rel="stylesheet" href="../static/lib/editormd/css/editormd.preview.css" th:src="@{/lib/editormd/css/editormd.preview.css}" />

  <!--引入js文件-->
  <script src="../static/lib/jquery-3.2.1.min.js" th:src="@{/lib/jquery-3.2.1/jquery-3.2.1.min.js}"></script>
  <script src="../static/lib/editormd/lib/marked.min.js" th:src="@{/lib/editormd/lib/marked.min.js}"></script>
  <script src="../static/lib/editormd/lib/prettify.min.js" th:src="@{/lib/editormd/lib/prettify.min.js}"></script>
  <script src="../static/lib/editormd/lib/raphael.min.js" th:src="@{/lib/editormd/lib/raphael.min.js}"></script>
  <script src="../static/lib/editormd/lib/underscore.min.js" th:src="@{/lib/editormd/lib/underscore.min.js}"></script>
  <script src="../static/lib/editormd/lib/sequence-diagram.min.js" th:src="@{/lib/editormd/lib/sequence-diagram.min.js}"></script>
  <script src="../static/lib/editormd/lib/flowchart.min.js" th:src="@{/lib/editormd/lib/flowchart.min.js}"></script>
  <script src="../static/lib/editormd/lib/jquery.flowchart.min.js" th:src="@{/lib/editormd/lib/jquery.flowchart.min.js}"></script>
  <script src="../static/lib/editormd/editormd.js" th:src="@{/lib/editormd/editormd.js}"></script>
</head>
<body>

<div class="container-fluid p-1 bg-dark text-white text-center">
  <ul class="nav">
    <li class="nav-item">
      <a class="nav-link active" aria-current="page" href="/">首页</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="/tags">标签</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="/article">文章</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="/about">关于</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="/message">留言板</a>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link" data-bs-toggle="modal" data-bs-target="#searchModal">
        <strong>搜索</strong>
      </a>
    </li>
  </ul>
</div>

<!-- 搜索框 -->
<div class="modal fade" id="searchModal" tabindex="-1" aria-labelledby="searchModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable">
    <div class="modal-content p-2 ">
      <div class="modal-body ">
        <button type="button" class="btn-close float-end" data-bs-dismiss="modal" aria-label="Close"></button>
        <div class="text-center fs-5 mb-3">搜　索</div>
        <div class="input-group mb-4">
                    <span class="input-group-text" id="basic-addon1">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
                          <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
                        </svg>
                    </span>
          <input id="keywordInput" type="text" class="form-control" placeholder="输入关键词" aria-describedby="basic-addon1">
        </div>

        <div class="mb-2">搜索结果</div>
        <!-- 搜索结果展示区域 -->
        <div id="searchResults" class="list-group">
        </div>
      </div>

    </div>
  </div>
</div>

<div class="container-fluid p-5 bg-primary text-white text-center">
  <h1 th:text="${blog.getTitle()}">博客标题</h1>
</div>

<div class="container mt-5">
  <div id="testEditorMdview">
    <textarea id="appendTest" style="display:none;"></textarea>
  </div>
</div>

<textarea id="demo1" style="width:800px;height:300px;display: none;" th:text="${blog.getContent()}" >
</textarea>
<!--输入需要转换的markdown文件结束-->

<!--点击该按钮进行转换-->
<!--<button onclick="mdToHml();" type="button">点击转Html</button>-->




<!--在该div中展示,如有初始化的数据可以放在textarea中-->



<!--js开始-->
<script type="text/javascript">

  //markDown转HTMl的方法
  function mdToHml(){

    //先对容器初始化，在需要展示的容器中创建textarea隐藏标签，
    $("#testEditorMdview").html('<textarea id="appendTest" style="display:none;"></textarea>');
    var content=$("#demo1").val();//获取需要转换的内容
    $("#appendTest").val(content);//将需要转换的内容加到转换后展示容器的textarea隐藏标签中

    //转换开始,第一个参数是上面的div的id
    editormd.markdownToHTML("testEditorMdview", {
      htmlDecode: "style,script,iframe", //可以过滤标签解码
      emoji: true,
      taskList:true,
      tex: true,               // 默认不解析
      flowChart:true,         // 默认不解析
      sequenceDiagram:true,  // 默认不解析
    });
  }
  mdToHml()
</script>
<!--js结束-->
<script src="../static/lib/jquery-3.2.1/jquery-3.2.1.min.js" th:src="@{/lib/jquery-3.2.1/jquery-3.2.1.min.js}"></script>
<script src="../static/lib/waypoints/jquery.waypoints.min.js" th:src="@{/lib/waypoints/jquery.waypoints.min.js}"></script>
<script src="../static/lib/bootstrap.bundle.min.js" th:src="@{/lib/bootstrap.bundle.min.js}"></script>
<script src="../static/lib/clickEffect.js" th:src="@{/lib/clickEffect.js}"></script>




<script>
  // 获取关键词输入框
  const keywordInput = $('#keywordInput');
  //搜索 当用户输入结束时触发事件
  keywordInput.on('input', function() {
    // 使用定时器延迟发送 AJAX 请求，以确保用户输入结束
    clearTimeout(this.timer);
    this.timer = setTimeout(function () {
      // 获取用户输入的关键词
      const keyword = keywordInput.val();
      // 发送 AJAX 请求
      $.ajax({
        url: '/search',
        method: 'GET',
        data: { keyword: keyword },
        success: function(response) {
          // 处理从后端返回的数据
          if (response.code === 20000){
            var resultList = response.data.blogs;
            // 获取搜索结果列表容器
            var searchResults = $('#searchResults');
            // 清空原来的结果
            searchResults.empty();
            if (resultList){
              // 渲染搜索结果列表
              resultList.forEach(function(blog) {
                var blogItem = $('<a>').attr('href', `/blog/${blog.id}`).addClass('list-group-item list-group-item-action').text(blog.title);
                searchResults.append(blogItem);
              });
            }
          }
        },
        error: function(error) {
          console.error('Error:', error);
        }
      });
    }, 1000); // 1000 毫秒延迟
  });
</script>
</body>
</html>